<template>
  <div class="adjust">
    <div class="adjust_btn">
      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="adjustPriceFn"
                 v-hasPermi="['operator:priceType:add']">调整电价
      </el-button>
    </div>
    <div class="adjust_table">
      <el-table :data="tableDataA" stripe style="width: 100%">
        <el-table-column align="center" prop="interval" label="时间">
        </el-table-column>
        <el-table-column align="center" prop="period" label="时段">
          <template v-slot="{row}">
            <el-tag type="success" :style="{'background-color':row.col,'color':'#fff'}">{{ row.period }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="electricityPrice" label="电费(元)">
        </el-table-column>
        <el-table-column align="center" prop="serviceCharge" label="服务费(元)">
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="调整电价" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false" ><!--:before-close="closeDialog"-->
      <div class="adjust_dialog">
        <el-form ref="formData" :model="formData" label-width="80px">
          <el-form-item label="下发时间" size="mini">
            <el-select v-model="formData.region" placeholder="请选择日期">
              <el-option label="自定义时间" value="1"></el-option>
              <el-option label="立即生效" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.region === '1'" label="" size="mini">
            <el-date-picker type="date" placeholder="选择日期" v-model="formData.date" value-format="yyyy-MM-dd"
                            style="width: 150px;"></el-date-picker>
            <span style="display:inline-block;width: 10px;"></span>
            <el-time-picker placeholder="选择时间" v-model="formData.time" value-format="HH:mm:ss"
                            style="width: 110px;"></el-time-picker>
          </el-form-item>
          <el-form-item label="调整设备" size="mini">
            <div :class="formData.mold == '1' ? 'direct_btn' :''" class="direct">直流</div>
          </el-form-item>
          <el-form-item label="定价类型" size="mini">
            <div style=" display: flex;">
              <div :class="formData.pricing == '1' ? 'direct_btn' :''" @click="formData.pricing = '1'"
                   class="pricingType">全天同价
              </div>
              <div :class="formData.pricing == '2' ? 'direct_btn' :''" @click="formData.pricing = '2'"
                   class="pricingType" style="margin-left: 10px;">分时段可用
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="formData.pricing === '1'" label="" size="mini">
            <el-col :span="5">
              <el-input v-model="formData.electricPrice" placeholder="电费"></el-input>
            </el-col>
            <el-col class="line" :span="0.5">{{ ' + '}}</el-col>
            <el-col :span="5">
              <el-input v-model="formData.servicePrice" placeholder="服务费"></el-input>
            </el-col>
            <span>元/度</span>
          </el-form-item>
          <el-form-item v-if="formData.pricing == '2'" label="配置电价" size="mini">
            <div style="padding: 20px">
              <el-form :model="form" size="small">
                <el-form-item label="尖">
                  <el-button type="text" @click="tipAddon">新增尖时段</el-button>
                  <el-row v-for="(item,index) in form.tip" :key="index" :gutter="20" style="margin-bottom:20px">
                    <el-col :span="22">
                      <el-slider class="tip-class" v-model="form.tip[index]" range show-stops :max="sliderMax"
                                 :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
                    </el-col>
                    <el-col :span="2">
                      <el-button v-if="index>0" type="text" @click="tipDeleteOn(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="峰">
                  <el-button type="text" @click="peakAddon">新增峰时段</el-button>
                  <el-row v-for="(item,index) in form.peak" :key="index" :gutter="20" style="margin-bottom:20px">
                    <el-col :span="22">
                      <el-slider class="peak-class" v-model="form.peak[index]" range show-stops :max="sliderMax"
                                 :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
                    </el-col>
                    <el-col :span="2">
                      <el-button v-if="index>0" type="text" @click="peakDeleteOn(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="平">
                  <el-button type="text" @click="flatAddon">新增平时段</el-button>
                  <el-row v-for="(item,index) in form.flat" :key="index" :gutter="20" style="margin-bottom:20px">
                    <el-col :span="22">
                      <el-slider class="flat-class" v-model="form.flat[index]" range show-stops :max="sliderMax"
                                 :marks="marks" :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
                    </el-col>
                    <el-col :span="2">
                      <el-button v-if="index>0" type="text" @click="flatDeleteOn(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="谷">
                  <el-button type="text" @click="valleyAddon">新增谷时段</el-button>
                  <el-row v-for="(item,index) in form.valley" :key="index" :gutter="20" style="margin-bottom:20px">
                    <el-col :span="22">
                      <el-slider v-model="form.valley[index]" range show-stops :max="sliderMax" :marks="marks"
                                 :format-tooltip="formatTooltip" @change="submitOn"></el-slider>
                    </el-col>
                    <el-col :span="2">
                      <el-button v-if="index>0" type="text" @click="valleyDeleteOn(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item label="深谷">
                  <el-button type="text" @click="deepValleyAddon">新增深谷时段</el-button>
                  <el-row v-for="(item,index) in form.deepValley" :key="index" :gutter="20" style="margin-bottom:20px">
                    <el-col :span="22">
                      <el-slider class="deepValley-class" v-model="form.deepValley[index]" range show-stops
                                 :max="sliderMax" :marks="marks" :format-tooltip="formatTooltip"
                                 @change="submitOn"></el-slider>
                    </el-col>
                    <el-col :span="2">
                      <el-button v-if="index>0" type="text" @click="deepValleyDeleteOn(index)">删除</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </div>
          </el-form-item>
          <div style="width: 100%;padding:0 2vw;">
            <el-table v-if="formData.pricing == '2'" :data="tableDataSel" stripe style="width: 100%">
              <el-table-column align="center" prop="period" label="时段" width="150">
                <template v-slot="{row}">
                  <el-tag :color="row.col" style="color: #fff">{{ row.period }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="interval" label="时间" width="300">
              </el-table-column>
              <el-table-column align="center" prop="electricityPrice" label="电费(元)">
                <template slot-scope="{row}">
                  <el-input placeholder="电费" v-model="row.electricityPrice" type="number" clearable
                            size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="plus" label="" width="40">
              </el-table-column>
              <el-table-column align="center" prop="serviceCharge" label="服务费(元)">
                <template slot-scope="{row}">
                  <el-input placeholder="服务费" v-model="row.serviceCharge" type="number" clearable
                            size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="unit" label="" width="80">
              </el-table-column>
            </el-table>
          </div>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogSaveFn" size="mini">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getInfoByStationApi, addAdjustPrice, updateAdjustPrice } from '@/api/smart/operator/adjustPrice.js'

  export default {
    name: 'adjustingPrices',
    data() {
      return {
        dialogVisible: false,
        formData: {
          region: '1', // 1自定义 2分时段生效
          date: '', // 日期
          time: '', // 时间
          mold: '1', // 1直流
          pricing: '1', // 1全天一个价 2分段
          electricPrice: '', // 当pricing为1时 电费
          servicePrice: '',// 当pricing为1时 服务费
          priceTypeId: ''//模版ID
        },
        form: {
          tip: [[0, 0]], // 尖
          peak: [[0, 0]], // 峰
          flat: [[0, 0]], // 平
          valley: [[0, 0]], // 谷
          deepValley: [[0, 0]] // 深谷
        },
        // 弹框表格
        tableDataSel: [],
        // 表格
        tableDataA: [],
        // 滑块长度
        sliderMax: 48,
        // 替换文本
        marks: {}
      }
    },

    props: [],
    // 注册组件
    components: {},
    // 计算属性
    computed: {},
    // 生命周期函数
    created() {
      this.formData.priceTypeId = this.$route.query.priceTypeId
      this.maskListOn(48)
      this.getInfoByStationFn()
    },
    // 侦听器
    watch: {
      form: {
        // 自动触发,只能使用handler
        handler(newVal, oldVal) {
          // console.log(newVal);
          // console.log(oldVal);
          this.tableDataSel[0].interval = this.formatDateTime(this.form.tip)
          this.tableDataSel[1].interval = this.formatDateTime(this.form.peak)
          this.tableDataSel[2].interval = this.formatDateTime(this.form.flat)
          this.tableDataSel[3].interval = this.formatDateTime(this.form.valley)
          this.tableDataSel[4].interval = this.formatDateTime(this.form.deepValley)
        },
        // true表示侦听器立即触发(immediate默认为false)
        // immediate: true,
        // true表示深度侦听，侦听对象属性的变化
        deep: true
      },
      tableDataSel: {
        // 自动触发,只能使用handler
        handler(newVal, oldVal) {
          // console.log('数据发生了改变1111111111', this.tableDataSel)
        },
        // true表示侦听器立即触发(immediate默认为false)
        // immediate: true,
        // true表示深度侦听，侦听对象属性的变化
        deep: true
      }
    },
    // 方法函数
    methods: {
      closeDialog(){
        let that = this
        this.$modal.confirm('是否关闭当前价格调整弹窗?').then(function() {
          that.dialogVisible = false
        }).catch(() => {
          that.dialogVisible = false
        })
      },
      adjustPriceFn() {
        this.dialogVisible = true
        if (this.tableDataA !== undefined && this.tableDataA !== null) {
          if (this.tableDataA.length === 0) {
            // console.log('数组为空')
            this.formData = {
              region: '1', // 1自定义 2分时段生效
              date: '', // 日期
              time: '', // 时间
              mold: '1', // 1直流
              pricing: '1', // 1全天一个价 2分段
              electricPrice: '', // 当pricing为1时 电费
              servicePrice: '' // 当pricing为1时 服务费
            }
            this.form = {
              tip: [[0, 0]], // 尖
              peak: [[0, 0]], // 峰
              flat: [[0, 0]], // 平
              valley: [[0, 0]], // 谷
              deepValley: [[0, 0]] // 深谷
            }
            this.tableDataSel = [
              {
                interval: '[08:00-00:00]',
                period: '尖',
                periodNum: 1,
                electricityPrice: '',
                serviceCharge: '',
                plus: ' + ',
                unit: '元/度',
                col: '#ddda15'
              },
              {
                interval: '[08:00-00:00]',
                period: '峰',
                periodNum: 2,
                electricityPrice: '',
                serviceCharge: '',
                plus: ' + ',
                unit: '元/度',
                col: '#e60c0c'
              },
              {
                interval: '[08:00-00:00]',
                period: '平',
                periodNum: 3,
                electricityPrice: '',
                serviceCharge: '',
                plus: ' + ',
                unit: '元/度',
                col: '#30e60c'
              },
              {
                interval: '[08:00-00:00]',
                period: '谷',
                periodNum: 4,
                electricityPrice: '',
                serviceCharge: '',
                plus: ' + ',
                unit: '元/度',
                col: '#1d58a9'
              },
              {
                interval: '[08:00-00:00]',
                period: '深谷',
                periodNum: 5,
                electricityPrice: '',
                serviceCharge: '',
                plus: ' + ',
                unit: '元/度',
                col: '#50cdb8'
              }
            ]
          } else {
            let params = {
              // stationCode: this.$route.query.chargeStationCode,
              priceTypeId: this.$route.query.priceTypeId
            }
            // console.log('数组不为空')
            getInfoByStationApi(params).then(res => {
              // console.log('点击按钮试试', res)
              this.formData = res.data
              this.form = JSON.parse(res.data.dateFrom)
              this.tableDataSel = JSON.parse(res.data.tableData)
              // console.log('电价数据回显', this.tableDataSel)
            })
          }
        } else {
          // console.log('变量array未定义或为null')
        }
      },
      // 点击保存
      dialogSaveFn() {
        // 将所有内部数组扁平化并合并到一个数组中
        let flattenedArray = [].concat(this.form.tip, this.form.peak, this.form.flat, this.form.valley, this.form.deepValley)
        // 定义多个数组
        const arrays = flattenedArray
        // console.log('打印一下看看数组', [].concat(arrays[0], arrays[1], arrays[2], arrays[3], arrays[4]))
        // 定义原始数组
        let arr = flattenedArray
        // console.log('11111', arr)
        // 定义空数组用于存放处理后的结果
        let result = []
        // 遍历原始数组中的每个子数组
        for (let i = 0; i < arr.length; i++) {
          let subArray = arr[i]
          // 遍历子数组中的数字
          for (let j = subArray[0]; j <= subArray[1]; j++) {
            result.push(j)
          }
        }

        // console.log('222222', result)
        function checkArraysContainment(arr1, arr2) {
          // 判断arr1中的每一项是否都包含在arr2中
          let allContained = arr1.every(item => arr2.includes(item))
          // 判断arr2中的每一项是否都包含在arr1中
          let allContainedReverse = arr2.every(item => arr1.includes(item))
          // 如果arr1中的每一项都包含在arr2中，并且arr2中的每一项都包含在arr1中，则返回true，否则返回false
          return allContained && allContainedReverse
        }

        let arr3 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48]
        let arr4 = [...new Set(result)]
        // console.log('时间段', arr4)
        // console.log(checkArraysContainment(arr3, arr4))
        // // 初始化最大值和最小值为第一个数组的第一个元素
        // let max = arrays[0][0]
        // let min = arrays[0][0]
        // // 遍历每个数组，找到每个数组的最大值和最小值
        // arrays.forEach(array => {
        //   const arrayMax = Math.max(...array)
        //   const arrayMin = Math.min(...array)
        //   // 更新整体的最大值和最小值
        //   max = Math.max(max, arrayMax)
        //   min = Math.min(min, arrayMin)
        // })
        // if (this.formData.pricing == '2') {
        //   if (max < 48 || min > 0) {
        //     return this.$message.error('选择的时间段未包含00:00 - 24:00全部时间段,请重新选择!')
        //   }
        // }
        if (this.formData.pricing == '2') {
          if (!checkArraysContainment(arr3, arr4)) {
            return this.$message.error('选择的时间段未包含00:00 - 24:00全部时间段,请重新选择!')
          }
        }
        this.formData.stationCode = this.$route.query.chargeStationCode
        this.formData.dateFrom = JSON.stringify(this.form)
        this.formData.tableData = JSON.stringify(this.tableDataSel)
        this.formData.priceTypeId = this.$route.query.priceTypeId
        // console.log('处理前接口参数', this.tableDataSel)
        // console.log('接口参数', this.formData)
        // if (this.formData.mold == '1') {
        //   this.formData.dateFrom = {
        //     tip: [[0, 0]], // 尖
        //     peak: [[0, 0]], // 峰
        //     flat: [[0, 0]], // 平
        //     valley: [[0, 0]], // 谷
        //     deepValley: [[0, 0]] // 深谷
        //   }
        //   this.formData.tableData = [
        //     {
        //       interval: '[08:00-00:00]',
        //       period: '尖',
        //       periodNum: 1,
        //       electricityPrice: '',
        //       serviceCharge: '',
        //       plus: ' + ',
        //       unit: '元/度',
        //       col: '#ddda15'
        //     },
        //     {
        //       interval: '[08:00-00:00]',
        //       period: '峰',
        //       periodNum: 2,
        //       electricityPrice: '',
        //       serviceCharge: '',
        //       plus: ' + ',
        //       unit: '元/度',
        //       col: '#e60c0c'
        //     },
        //     {
        //       interval: '[08:00-00:00]',
        //       period: '平',
        //       periodNum: 3,
        //       electricityPrice: '',
        //       serviceCharge: '',
        //       plus: ' + ',
        //       unit: '元/度',
        //       col: '#30e60c'
        //     },
        //     {
        //       interval: '[08:00-00:00]',
        //       period: '谷',
        //       periodNum: 4,
        //       electricityPrice: '',
        //       serviceCharge: '',
        //       plus: ' + ',
        //       unit: '元/度',
        //       col: '#1d58a9'
        //     },
        //     {
        //       interval: '[08:00-00:00]',
        //       period: '深谷',
        //       periodNum: 5,
        //       electricityPrice: '',
        //       serviceCharge: '',
        //       plus: ' + ',
        //       unit: '元/度',
        //       col: '#50cdb8'
        //     }
        //   ]
        // }
        // console.log('点击保存处理后的数据', this.formData)
        // console.log('点击判断数组是否为空', this.tableDataA)
        if (this.tableDataA !== undefined && this.tableDataA !== null) {
          if (this.tableDataA.length === 0) {
            // console.log('数组为空')
            addAdjustPrice({ ...this.formData }).then(res => {
              this.getInfoByStationFn()
              this.$message({
                message: '新增电价成功!',
                type: 'success'
              })
            })
          } else {
            // console.log('数组不为空')
            updateAdjustPrice({ ...this.formData }).then(res => {
              // console.log('保存后上传', res)
              this.getInfoByStationFn()
              this.$message({
                message: '修改电价成功!',
                type: 'success'
              })
            })
          }
        } else {
          // console.log('变量array未定义或为null')
        }

        this.dialogVisible = false
      },
      // 时间段处理
      formatDateTime(arr) {
        let result = arr.map(item => {
          return JSON.stringify([
            item[0] % 2 === 0 ? (item[0] / 2 < 10 ? '0' + item[0] / 2 + ':00' : item[0] / 2 + ':00') : ((item[0] - 1) / 2 < 10 ? '0' + (item[0] - 1) / 2 : (item[0] - 1) / 2) + ':30',
            item[1] % 2 === 0 ? (item[1] / 2 < 10 ? '0' + item[1] / 2 + ':00' : item[1] / 2 + ':00') : ((item[1] - 1) / 2 < 10 ? '0' + (item[1] - 1) / 2 : (item[1] - 1) / 2) + ':30'
          ])
        })
        return result.join(',')
      },
      // 获取站点电价列表
      getInfoByStationFn() {
        let params = {
          // stationCode: this.$route.query.chargeStationCode,
          priceTypeId: this.$route.query.priceTypeId
        }
        getInfoByStationApi(params).then(res => {
          this.tableDataA = res.data.tableDataList || []
          // console.log('获取站点电价列表', this.tableDataA)
        })
      },
      /**
       * 尖时段
       */
      // 新增
      tipAddon() {
        this.form.tip.push([0, 0])
      },
      // 删除
      tipDeleteOn(index) {
        this.form.tip.splice(index, 1)
      },
      /**
       * 峰时段
       */
      // 新增
      peakAddon() {
        this.form.peak.push([0, 0])
      },
      // 删除
      peakDeleteOn(index) {
        this.form.peak.splice(index, 1)
      },
      /**
       * 平时段
       */
      // 新增
      flatAddon() {
        this.form.flat.push([0, 0])
      },
      // 删除
      flatDeleteOn(index) {
        this.form.flat.splice(index, 1)
      },
      /**
       * 谷时段
       */
      // 新增
      valleyAddon() {
        this.form.valley.push([0, 0])
      },
      // 删除
      valleyDeleteOn(index) {
        this.form.valley.splice(index, 1)
      },
      /**
       * 深谷时段
       */
      // 新增
      deepValleyAddon() {
        this.form.deepValley.push([0, 0])
      },
      // 删除
      deepValleyDeleteOn(index) {
        this.form.deepValley.splice(index, 1)
      },
      /**
       * 尖峰平谷之一的单个数据的去重+可合并提醒，name是对象键值
       */
      duplicateRemovalAndMerge(name, form) {
        // 成绩最后结果
        let list = []
        let copyList = []
        // 循环尖峰平谷对应数组的子数组数据
        form[name].map((item, index) => {
          let arr = []
          // 数组拓充
          for (let i = item[0]; i <= item[1]; i++) {
            arr.push(i)
          }
          list.push(arr)
        })
        // 数组合并
        list = list.flat()
        copyList = [...new Set(list)]
        return list.length - copyList.length
        if (list.length - copyList.length == 0) {
          return list
        } else if (list.length - copyList.length == 1) {
          this.$message.error('有可合并时间段，请重新选择')
          return
        } else if (list.length - copyList.length > 1) {
          this.$message.error('有重复时间段，请重新选择或删除重复数据')
          return
        }
      },
      submitOn() {
        // 键值内部判断是否重复
        for (let i in this.form) {
          if (this.duplicateRemovalAndMerge(i, this.form) > 0) {
            this.$message.error('有可合并时间段，请重新选择')
            return false
          }
        }
        // 内部无重复，this.form数据都能用，判断this.form键与键之间的数据
        // 数据改造，已知每个数只有两个属性，头或尾，两个头或两个尾不允许
        // list是所有节点数据
        let list = this.addHeadEnd(this.form)
        // 之后找出是否含有两个完全一样的元素，或一个是head、end全true，另一个是只有head或end是true的元素，证明有重复元素
        if (this.findSameElement(list)) {
          // 无重复数据
          // this.$message.success('添加时间段成功')
          // 子组件向父组件传值
          // this.$emit('change',this.form)
          return this.form
        } else {
          // 有重复数据
          this.$message.error('尖峰平谷时间段冲突，请重新选择')
          return false
        }
      },
      /**
       * 数据增加头尾属性
       */
      addHeadEnd(form) {
        let list = []
        // 每个数两个属性，头或尾，一个数组中间的数头尾都占了，所以不允许二次出现，头尾数字相对，头出现下次再出现就是尾
        // 尾出现下次出现是头数据
        // 将每个分组内部先定义
        for (let key in form) {
          form[key].map(item => {
            let arr = []
            // 数组拓充
            for (let i = item[0]; i <= item[1]; i++) {
              arr.push(i)
            }
            list.push(this.arrToObj(arr))
            list = list.flat()
            // 在此处将数据增加头尾属性
          })
        }
        return list
      },
      /**
       * 数组转对象
       */
      arrToObj(arr) {
        let obj = []
        if (arr.length > 1) {
          // 数组有两个值进行判断，没有进行尖峰平谷选择不判断
          arr.forEach((item, index) => {
            if (index == 0) {
              // 只有头属性
              obj[index] = {
                num: item,
                head: true,
                end: false
              }
            } else if (index == arr.length - 1) {
              // 只有尾属性
              obj[index] = {
                num: item,
                head: false,
                end: true
              }
            } else {
              // 头属性尾属性都有
              obj[index] = {
                num: item,
                head: true,
                end: true
              }
            }
          })
        }
        return obj
      },
      /**
       * findSameElement,找到对象数组是否有相同的元素
       */
      findSameElement(arr) {
        let list = []
        // head是true,end是true
        let arrcopy = []
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].head && arr[i].end) {
            arrcopy.push(arr[i])
          }
        }
        // head或end有一个是true
        let arrcopy2 = []
        for (let i = 0; i < arr.length; i++) {
          if ((arr[i].head && !arr[i].end) || (!arr[i].head && arr[i].end)) {
            arrcopy2.push(arr[i])
          }
        }
        for (let i = 0; i < arrcopy.length; i++) {
          for (let j = 0; j < arrcopy2.length; j++) {
            if (arrcopy[i].num == arrcopy2[j].num) {
              // 当全true的数组里和整集的有相同元素时
              return false
            }
          }
        }
        arr.map(item => {
          list.push('' + item.num + item.head + item.end)
        })
        return list.length == [...new Set(list)].length
      },
      /**
       * 滑块的文字描述
       */
      maskListOn(data) {
        if (data == 24) {
          // 1小时制
          for (let i = 0; i < 25; i++) {
            if (i < 10) {
              this.marks[i] = '0' + i + ':00'
            } else {
              this.marks[i] = i + ':00'
            }
          }
        } else if (data == 48) {
          // 半小时制
          for (let i = 0; i < 49; i++) {
            if (i % 2 == 0) {
              // 偶数显示
              this.marks[i] = i / 2 + ':00'
            }
          }
        }
      },
      /**
       *
       * @param {滑块的tooltip文字描述} val
       */
      formatTooltip(val) {
        if (val % 2 == 0) {
          // 偶数
          return val / 2 + ':00'
        } else {
          // 奇数
          let str = val / 2 + ''
          str = str.split('.')[0]
          return str + ':30'
        }
      }
    }
  }
</script>
<style lang='scss' scoped>
  .adjust {
    padding: 2vh 1vw;
  }

  .adjust_btn {
    margin-bottom: 1vh;
  }

  .direct {
    width: 50px;
    border: 1px solid #f5f7fa;
    background-color: #f5f7fa;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
  }

  .pricingType {
    width: 95px;
    border: 1px solid #f5f7fa;
    background-color: #f5f7fa;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
  }

  .direct_btn {
    border: 1px solid #2982ff;
    background-color: #e8f3ff;
  }

  .adjust_dialog {
    width: 100%;
    height: 720px;
    overflow-y: scroll;
  }

  ::v-deep .dialog-footer {
    padding-right: 2vw;
    margin: 2vh 0;
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep .el-input--mini .el-input__inner {
    text-align: center;
  }
</style>
<style scoped>
  /**
   * 尖时段选中颜色
   * 孙琮
   */
  .tip-class /deep/ .el-slider__bar {
    background: rgb(221, 218, 21);
  }

  .tip-class /deep/ .el-slider__button {
    border: solid 2px rgb(221, 218, 21);
  }

  /**
   * 峰时段选中颜色
   * 孙琮
   */
  .peak-class /deep/ .el-slider__bar {
    background: rgb(230, 12, 12);
  }

  .peak-class /deep/ .el-slider__button {
    border: solid 2px rgb(230, 12, 12);
  }

  /**
   * 平时段选中颜色
   * 孙琮
   */
  .flat-class /deep/ .el-slider__bar {
    background: rgb(48, 230, 12);
  }

  .flat-class /deep/ .el-slider__button {
    border: solid 2px rgb(48, 230, 12);
  }

  .deepValley-class /deep/ .el-slider__bar {
    background: rgb(80, 205, 184);
  }

  .deepValley-class /deep/ .el-slider__button {
    border: solid 2px rgb(80, 205, 184);
  }

  ::v-deep .el-slider__marks-text {
    white-space: nowrap;
  }
</style>
